.rfid-preview-trigger { cursor: zoom-in; -webkit-tap-highlight-color: transparent; }
.rfid-preview-trigger:focus-visible { outline: 2px solid #409eff; outline-offset: 3px; }
.image-viewer { position: fixed; inset: 0; z-index: 999; color: #fff; }
.image-viewer[hidden] { display: none !important; }
.image-viewer__mask { position: absolute; inset: 0; background: rgba(0,0,0,.5); }
.image-viewer__stage { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; overflow: hidden; touch-action: none; user-select: none; }
.image-viewer__transform { flex: 0 0 auto; width: min(600px, 100vw); transform-origin: center; will-change: transform; cursor: grab; }
.image-viewer__transform.is-dragging { cursor: grabbing; }
.image-viewer__transform.is-original { width: 600px; }
.image-viewer__image { display: block; width: 100%; height: auto; max-width: none; margin: 0; }
.image-viewer__transform img { pointer-events: none; -webkit-user-drag: none; }
.image-viewer__button { appearance: none; -webkit-appearance: none; border: 0; padding: 0; display: flex; align-items: center; justify-content: center; color: #fff; background: transparent; cursor: pointer; touch-action: manipulation; -webkit-tap-highlight-color: transparent; }
.image-viewer__button:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }
.image-viewer__button:disabled { opacity: .4; cursor: default; }
.image-viewer__button svg { display: block; width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.image-viewer__close { position: absolute; z-index: 1; top: 40px; right: 40px; width: 44px; height: 44px; border-radius: 50%; background: rgba(96,98,102,.8); }
.image-viewer__close svg { width: 28px; height: 28px; }
.image-viewer__actions { position: absolute; z-index: 1; bottom: calc(30px + env(safe-area-inset-bottom, 0px)); left: 50%; transform: translateX(-50%); box-sizing: border-box; width: min(282px, calc(100vw - 24px)); height: 44px; padding: 0 16px; border-radius: 22px; display: flex; align-items: center; justify-content: space-between; background: rgba(96,98,102,.8); }
.image-viewer__actions .image-viewer__button { width: 40px; height: 40px; }
@media (prefers-reduced-motion: no-preference) { .image-viewer { animation: image-viewer-enter .15s ease; } }
@keyframes image-viewer-enter { from { opacity: 0; } to { opacity: 1; } }